<template>
  <el-dialog :title="title" :close-on-click-modal="false" :visible.sync="visible" width="800px" append-to-body :before-close="handleClose">
    <trouble-shooting-detail :form="form" :dataStatus="dataStatus"></trouble-shooting-detail>
    <el-form v-if="dataStatus == 3" ref="form" :model="form" :rules="rules" label-width="120px" size="mini">
        <div class="form-title">指派信息</div>
      <el-row>
        <el-col :span="12">
          <el-form-item label="指派人" prop="assignorUserName">
            {{form.assignorUserName}}
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="选择作业项目" prop="quantitativeTypeId">
            <maintain-work-project-select v-model="form.quantitativeTypeId"></maintain-work-project-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
          <el-col :span="24">
          <el-form-item label="自有人员" prop="ownPersonnel">
            <dept-user-select :multiple="true" v-model="form.ownPersonnel" :deptId="form.deptId"></dept-user-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="外包人数" prop="outSourceNum">
            <el-input type="number" v-model="form.outSourceNum" placeholder="请输入外包人数" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="任务数" prop="taskNum">
            <el-input type="number" v-model="form.taskNum" placeholder="请输入任务数" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="接收人" prop="receiveUserId">
            <dept-user-select v-model="form.receiveUserId" :deptId="form.deptId"></dept-user-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getTroubleShooting,
  updateTroubleShooting,
} from "@/api/cases/troubleShooting";
import DeptUserSelect from '@/components/Select/DeptUserSelect.vue';
import { mapGetters } from 'vuex';
import TroubleShootingDetail from '@/components/Detail/troubleShootingDetail.vue';
import MaintainWorkProjectSelect from '../Select/MaintainWorkProjectSelect.vue';

export default {
  components: { DeptUserSelect, TroubleShootingDetail,MaintainWorkProjectSelect },
  data() {
    return {
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      visible: false,
      // 表单参数
      form: {
        id: void 0,
        roadName: void 0,
        troubleshootingDirection: void 0,
        locationPileNumberBegin: void 0,
        locationPileNumberEnd: void 0,
        iTroubleshooting: void 0,
        iPart: void 0,
        locationNum: void 0,
        damageLevel: void 0,
        damageNum: void 0,
        numUnit: void 0,
        description: void 0,
        repairMethod: void 0,
        troubleshootingTime: void 0,
        picIds: void 0,
        auditUserId: void 0,
        deptId: void 0,
        dataStatus: void 0,
        auditMessage: void 0,
        assignorUserId: void 0,
        quantitativeTypeId: void 0,
        ownPersonnel:[],
        outSourceNum: void 0,
        receiveUserId: void 0
      },
      dataStatus: void 0
    }
  },
  props: {
  },
  computed: {
    ...mapGetters(["userId"]),
    // 表单校验
    rules() {
      return {
        quantitativeTypeId: [
          { required: true, message: "作业项目不能为空", trigger: "change" },
        ],
        taskNum: [
          { required: true, message: "任务数不能为空", trigger: "blur" },
        ],
        receiveUserId: [
          { required: true, message: "接收人不能为空", trigger: "change" },
        ],
      }
    },
  },
  methods: {
    /**
     * 打开
     */
    open(id) {
      getTroubleShooting(id).then((response) => {
        this.form = response.data;
        this.dataStatus = this.form.dataStatus;
        this.visible = true;
        this.title = "指派";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          let data = Object.assign({}, this.form, { dataStatus: 5 });
          if((data.ownPersonnel && data.ownPersonnel.length > 0 ) || data.outSourceNum > 0){
            updateTroubleShooting(data).then(({ code, data, msg }) => {
              if (code == 200) {
                this.$modal.msgSuccess("指派完成");
                this.handleClose();
                this.$root.$emit("updateTable");
              } else {
                this.$modal.msgError(msg);
              }
            });
          }else{
            this.$modal.msg("请选择自有人员或填写外包人数");
          }
        }
      });
    },
    /**
     * 处理关闭
     */
    handleClose() {
      this.cancel();
    },
    /**
     * 隐藏
     */
    cancel() {
      this.visible = false;
    },
  }
}
</script>

<style>
</style>